<template>
    <!-- #ifdef H5 -->
    <tr class="uni-table-tr">
        <th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
            <table-checkbox
                :checked="checked"
                :indeterminate="indeterminate"
                :disabled="disabled"
                @checkbox-selected="checkboxSelected"
            ></table-checkbox>
        </th>
        <slot></slot>
        <!-- <uni-th class="th-fixed">123</uni-th> -->
    </tr>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <view class="uni-table-tr">
        <view v-if="selection === 'selection'" class="checkbox" :class="{ 'tr-table--border': border }">
            <table-checkbox
                :checked="checked"
                :indeterminate="indeterminate"
                :disabled="disabled"
                @checkbox-selected="checkboxSelected"
            ></table-checkbox>
        </view>
        <slot></slot>
    </view>
    <!-- #endif -->
</template>

<script>
import tableCheckbox from "./table-checkbox.vue";
/**
 * Tr 表格行组件
 * @description 表格行组件 仅包含 th,td 组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=
 */
export default {
    name: "UniTr",
    components: {
        tableCheckbox
    },
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        keyValue: {
            type: [String, Number],
            default: ""
        }
    },
    options: {
        // #ifdef MP-TOUTIAO
        virtualHost: false,
        // #endif
        // #ifndef MP-TOUTIAO
        virtualHost: true
        // #endif
    },
    data() {
        return {
            value: false,
            border: false,
            selection: false,
            widthThArr: [],
            ishead: true,
            checked: false,
            indeterminate: false
        };
    },
    created() {
        this.root = this.getTable();
        this.head = this.getTable("uniThead");
        if (this.head) {
            this.ishead = false;
            this.head.init(this);
        }
        this.border = this.root.border;
        this.selection = this.root.type;
        this.root.trChildren.push(this);
        const rowData = this.root.data.find((v) => v[this.root.rowKey] === this.keyValue);
        if (rowData) {
            this.rowData = rowData;
        }
        this.root.isNodata();
    },
    mounted() {
        if (this.widthThArr.length > 0) {
            const selectionWidth = this.selection === "selection" ? 50 : 0;
            this.root.minWidth = Number(this.widthThArr.reduce((a, b) => Number(a) + Number(b))) + selectionWidth;
        }
    },
    // #ifndef VUE3
    unmounted() {
        const index = this.root.trChildren.findIndex((i) => i === this);
        this.root.trChildren.splice(index, 1);
        this.root.isNodata();
    },
    // #endif
    // #ifdef VUE3
    unmounted() {
        const index = this.root.trChildren.findIndex((i) => i === this);
        this.root.trChildren.splice(index, 1);
        this.root.isNodata();
    },
    // #endif
    methods: {
        minWidthUpdate(width) {
            this.widthThArr.push(width);
            if (this.widthThArr.length > 0) {
                const selectionWidth = this.selection === "selection" ? 50 : 0;
                this.root.minWidth = Number(this.widthThArr.reduce((a, b) => Number(a) + Number(b))) + selectionWidth;
            }
        },
        // 选中
        checkboxSelected(e) {
            let rootData = this.root.data.find((v) => v[this.root.rowKey] === this.keyValue);
            this.checked = e.checked;
            this.root.check(rootData || this, e.checked, rootData ? this.keyValue : null);
        },
        change(e) {
            this.root.trChildren.forEach((item) => {
                if (item === this) {
                    this.root.check(this, e.detail.value.length > 0 ? true : false);
                }
            });
        },
        /**
         * 获取父元素实例
         */
        getTable(name = "uniTable") {
            let parent = this.$parent;
            let parentName = parent.$options.name;
            while (parentName !== name) {
                parent = parent.$parent;
                if (!parent) return false;
                parentName = parent.$options.name;
            }
            return parent;
        }
    }
};
</script>

<style lang="scss">
$border-color: #ebeef5;

.uni-table-tr {
    /* #ifndef APP-NVUE */
    display: table-row;
    transition: all 0.3s;
    box-sizing: border-box;
    /* #endif */
}

.checkbox {
    padding: 0 8px;
    width: 26px;
    padding-left: 12px;
    /* #ifndef APP-NVUE */
    display: table-cell;
    vertical-align: middle;
    /* #endif */
    color: #333;
    font-weight: 500;
    border-bottom: 1px $border-color solid;
    font-size: 14px;
    // text-align: center;
}

.tr-table--border {
    border-right: 1px $border-color solid;
}

/* #ifndef APP-NVUE */
.uni-table-tr {
    ::v-deep .uni-table-th {
        &.table--border:last-child {
            // border-right: none;
        }
    }

    ::v-deep .uni-table-td {
        &.table--border:last-child {
            // border-right: none;
        }
    }
}

/* #endif */
</style>
